
import Konva from 'konva'

// 生命线组件
export const createLifeLine = (opt, stage, instance) => {
  const opts = {
    width: opt.width || 100,
    height: opt.height || 100,
    x: opt.x || 0,
    y: opt.y || 0,
    label: opt.label || '',
    color: opt.color || '#07cdb1'
  }

  const LifeLine = new Konva.Group({
    id: opts.id,
    x: opts.x,
    y: opts.y,
    width: opts.width,
    height: opts.height,
    draggable: true,
    dragBoundFunc: function(pos) {
      return {
        x: pos.x,
        // y: pos.y
        y: this.absolutePosition().y
      }
    }
  })

  // const box = new Konva.Rect({
  //   x: 0,
  //   y: 0,
  //   width: opts.width,
  //   height: opts.height,
  //   fill: 'transparent',
  //   stroke: 'red',
  //   strokeWidth: 0,
  //   name: 'lifeLine',
  //   id: opts.id
  // })

  // box.on('mouseover', e => {
  //   box.fill('rgba(7, 205, 177, 0.1)')
  //   layer.draw()
  // })
  // box.on('mouseout', e => {
  //   box.fill('transparent')
  //   layer.draw()
  // })

  const buttonProps = {
    w: 100,
    h: 32,
    r: 4,
    top: 40,
    ...opt?.buttonProps
  }

  const x = opts.width / 2 - buttonProps.w / 2

  const button = new Konva.Rect({
    x,
    y: buttonProps.top,
    cornerRadius: buttonProps.r,
    width: buttonProps.w,
    height: buttonProps.h,
    fillRadialGradientStartPoint: { x: buttonProps.w / 2, y: buttonProps.h / 2 },
    fillRadialGradientStartRadius: 0,
    fillRadialGradientEndPoint: { x: buttonProps.w / 2, y: buttonProps.h / 2 },
    fillRadialGradientEndRadius: buttonProps.w,
    fillRadialGradientColorStops: [0, 'rgba(6, 102, 90, 0.498)', 1, opts.color],
    stroke: opts.color,
    strokeWidth: 1,
    listening: true,
    name: 'lifeLine',
    id: opt.id
  })

  instance.readony || button.on('click', () => {
    stage.find('.activeNode').forEach((node) => {
      node.destroy()
    })
    const r = new Konva.Rect({
      name: 'activeNode',
      x: button.x() - 2,
      y: button.y() - 2,
      width: button.width() + 4,
      height: button.height() + 4,
      fill: ' transparent ',
      stroke: '#ff00d1',
      strokeWidth: 2,
      listening: false
    })
    LifeLine.add(r)
  })

  LifeLine.add(button)

  const text = new Konva.Text({
    x,
    y: buttonProps.top,
    text: opts.label,
    width: buttonProps.w,
    height: buttonProps.h,
    fontSize: 14,
    fontFamily: 'Microsoft YaHei',
    fill: '#fff',
    align: 'center',
    verticalAlign: 'middle',
    name: 'lifeLine',
    listening: false
  })
  LifeLine.add(text)

  const x1 = opts.width / 2
  const rowLine = new Konva.Line({
    points: [x1, buttonProps.top + buttonProps.h, x1, opts.height],
    stroke: '#8b9298',
    strokeWidth: 0.5,
    dash: [15, 5],
    name: 'lifeLine',
    listening: false
  })
  LifeLine.add(rowLine)

  // LifeLine.add(box)

  return LifeLine
}

// 子节点组件
export const createChildNode = (opt, instance) => {
  const cn = new Konva.Group()
  const rect = new Konva.Rect({
    x: opt.x,
    y: opt.y,
    width: Number(opt.width),
    height: Number(opt.height),
    fill: opt.color || '#07cdb1',
    name: 'childNode',
    id: opt.id
  })

  rect.on('click', (e) => {
    instance.stage.find('.activeNode').forEach((node) => {
      node.destroy()
    })
    const r = new Konva.Rect({
      name: 'activeNode',
      x: rect.x() - 2,
      y: rect.y() - 2,
      width: rect.width() + 4,
      height: rect.height() + 4,
      fill: ' transparent ',
      stroke: '#ff00d1',
      strokeWidth: 2,
      listening: false
    })
    cn.add(r)
  })

  let offsetX = opt.width + 5
  if (opt.labelPosition === 'left') {
    offsetX = -offsetX
  }
  const config = {
    x: opt.x + offsetX,
    y: opt.y + 5,
    text: opt.label,
    width: 14,
    // height: opt.height,
    fontSize: 12,
    fontFamily: 'Microsoft YaHei',
    fill: '#fff',
    align: 'center',
    verticalAlign: 'top'
  }

  const txt = new Konva.Text(config)
  cn.add(rect)
  cn.add(txt)

  const flag = false
  if (flag && opt.connectionPoint) {
    const arrowG = new Konva.Group()
    let x1 = opt.x + opt.width + 2
    let x2 = x1 + opt.cellWidth - 20
    let y1 = opt.y + opt.height - 20
    let obj = {}
    let offsetY = 20
    let xt = x1
    if (opt.connectionPoint.type === 'after') {
      x1 = opt.x - 2
      x2 = x1 - opt.cellWidth + 20
      y1 = opt.y + opt.height - 10
      obj = {
        dash: [10, 5]
      }
      offsetY = -10
      xt = x2
    }

    const arrow = new Konva.Arrow({
      id: opt.connectionPoint,
      points: [x1, y1, x2, y1],
      stroke: opt.color,
      fill: opt.color,
      pointerLength: 10,
      pointerWidth: 10,
      strokeWidth: 1,
      ...obj
    })

    const txt1 = new Konva.Text({
      id: opt.connectionPoint,
      x: xt,
      y: y1,
      width: Math.abs(x2 - x1),
      text: opt.connectionPoint.label,
      fill: opt.connectionPoint.color,
      fontSize: 12,
      fontFamily: 'Microsoft YaHei',
      align: 'center',
      verticalAlign: 'middle',
      offsetY
    })
    arrowG.add(txt1)
    arrowG.add(arrow)
    // cn.add(arrowG)
  }

  const r = rect.height() + rect.y()
  const t = txt.height() + txt.y()

  let b1 = r
  if (b1 < t) b1 = t
  if (instance.bottom < b1) instance.bottom = b1
  return cn
}

export class ActiveNode extends Konva.Group {
  /**
   * @param { import('konva').default.Shape } node
   */
  attachTo(node) {
    const pos = {
      x: node.x() - 2,
      y: node.y() - 2,
      width: node.width() + 4,
      height: node.height() + 4
    }

    /**
   * @param { import('konva').default.Shape } node
   */
    const fn = (node) => {
      const p = node.parent
      const t = p.getType()
      if (t === 'Stage') return
      if (p) {
        pos.x += p.x()
        pos.y += p.y()
        fn(p)
      }
    }

    fn(node)

    this.removeChildren()

    const r = new Konva.Rect({
      ...pos,
      fill: 'transparent',
      stroke: '#ff00d1',
      strokeWidth: 2
    })
    this.add(r)
  }
}
